<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <style type="text/css">
        h2.pos_left
        {
        position:relative; /*相对*/
        left:-20px;
        /*!*right: 20px;*!   相等*/
        }
        h2.pos_right
        {
        position:relative;
        left:20px
        }
        h2.pos_abs
        {
        position:absolute; /*绝对*/
        left:100px;
        top:30px;
        margin: 0px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
    <div class="col-md-6 col-md-offset-2">
        <p style="color: red;font-size: 2em"> position:relative 相对定位</p>
    </div>
</div>
        <div class="row">
    <div class="col-md-6 col-md-offset-2">
        <div><img src="img/相对定位.gif"></div>
    </div>
</div>
    <div class="row" >
        <div class="col-md-6 col-md-offset-2" style="box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h2>这是位于正常位置的标题</h2>
            <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
            <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
            <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
            <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
            <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
            </div>
        </div>
<h5 class="page-header"></h5>
<div class="row">
    <div class="col-md-6 col-md-offset-2">
        <p style="color: red;font-size: 2em"> position: absolute ,绝对定位于父元素内</p>
    </div>
</div>
    <div class="row" >
        <div class="col-md-6 col-md-offset-2" style="box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h2 class="pos_abs">这是带有绝对定位的标题</h2>
            <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
            </div>
        </div>
    </div>
<p style="margin: 20px"></p>
<h5 class="page-header"></h5>
<div class="row">
    <div class="col-md-6 col-md-offset-2">
        <p style="color: red;font-size: 2em;text-align: center"> float 浮动</p>
    </div>
</div>
    <div class="row" >
        <div class="col-md-8 col-md-offset-2" style="box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>
            <span>T</span>his is some text.
            This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            </p>

            <p>
            在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
            </p>
            </div>
        </div>

    <div class="row" >
        <div class="col-md-8 col-md-offset-2" style="box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <div class="pic">
            <img src="img/eg_cute.gif" /><br />
            CSS is fun!
            </div>
            <p>
            This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            </p>

            <p>
           在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。
                div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。
                同时，我们还向 div 添加了边框和内边距。
            </p>
            </div>
        </div>
        <style type="text/css">
        span
        {
            float:left;
            width:0.7em;
            font-size:400%;
            font-family:algerian,courier;
            line-height:80%;
        }
        .pic
            {
            float:right;
            width:120px;
            margin:0 0 15px 20px;
            padding:15px;
            border:1px solid black;
            text-align:center;
            }
        </style>
</body>

</html>
